<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社区 - AI故事生成器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href='/static/css/1.css'>
    <link rel="stylesheet" href="/static/css/header.css">
    <link rel="stylesheet" href="/static/css/footer.css">
    <link rel="stylesheet" href="/static/css/community.css">
    <script src="/static/js/header.js" defer></script>
</head>
<body>
<!-- 导航栏 -->
{% include 'header.html' %}

<div class="container">
    <div class="main-content">
        <!--热门故事-->
        <div class="left-column">
            <div class="section-title">
                本周热门故事
            </div>
            <div class="card">
                {% for story in stories %}
                    <div class="hot-story">
                        <div class="story-number">{{ forloop.counter }}</div>
                        <div class="story-content">
                            <h3>{{ story.title }}</h3>
                            <p>{{ story.content|truncatechars:100 }}</p>
                            <div class="story-meta">
                                <span>阅读量： {{ story.read }}</span>
                                <span>点赞数： {{ story.likes }}</span>
                                <span>评论数： {{ story.comments_count }}</span>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

            <div class="section-title">
                <i class="fas fa-comments"></i>
                最新讨论
            </div>
            <div class="card">
                {% for comment in comments %}
                    <div class="discussion">
                        <div class="users-avatar">{{ comment.user.username|slice:1|upper }}</div>
                        <div class="discussion-content">
                            <h3>{{ comment.user.username }}</h3>
                            <p>{{ comment.content }}</p>
                            <div class="story-meta">
                                <span>故事： {{ comment.store.title }}</span>
                                <span>发布时间： {{ comment.date }}</span>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        {#          用户，作者：排行榜#}
        <div class="sidebar">
            <div class="section-title">
                <i class="fas fa-crown"></i>
                创作者排行榜
            </div>
            <div class="card">
                {% for author in authors %}
                    {% if author.stories_count > 0 and author.stories_likes_sum > 0 %}
                        <div class="creator">
                            <div class="rank">{{ forloop.counter }}</div>
                            <div class="creator-info">
                                <div class="creator-avatar">{{ author.username|slice:1|upper }}</div>
                                <div class="creator-details">
                                    <h4>{{ author.username }}</h4>
                                    <p><i class="fas fa-star"></i> {{ author.stories_count }}篇故事
                                        · {{ author.stories_likes_sum }}点赞数</p>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
{% include 'footer.html' %}
</body>
</html>